<template>
    <div id="uesrtext">
        <textarea placeholder="按 Ctrl + Enter 发送" v-model="content" v-on:keyup="addMessage"></textarea>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: 'uesrtext',
        data() {
            return {
                content: '',
                user: JSON.parse(window.sessionStorage.getItem("user"))
            }
        },
        mounted() {
             
        },
        computed: mapState([
            'sessions',
            'currentSession'
        ]),
        methods: {
            addMessage(e) {
               
                if (e.ctrlKey && e.keyCode === 13 && this.content.length) {
                    let msgObj = new Object();
                    msgObj.to = this.currentSession.username;
                    msgObj.content = this.content;
                    msgObj.from = this.user.username
                    // destinationUrl:服务端Controller中@MessageMapping中匹配的URL
                    // headers:发送信息的header，JavaScript对象，可选参数，省略可用{}代替
                    // body：发送信息的body，字符串，可选参数
                    // stompClient.send(destinationUrl, headers, body)
                    this.$store.state.stomp.send('/chat', {}, JSON.stringify(msgObj));
    
                    this.$store.commit('addMessage', msgObj);
                    this.content = '';
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    #uesrtext {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 30%;
        border-top: solid 1px #DDD;

        > textarea {
            padding: 10px;
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
        }
    }
</style>
